<template>
  <div class="content">
    <h1 class="title">
      <slot name="title"></slot>
    </h1>
    <ul>
      <li>
        <div class="song-item">
          <span class="item-index"></span>
          <span class="item-name">乐谱名</span>
          <span class="item-title">介绍</span>
          <span class="item-intro">乐谱</span>
        </div>
      </li>
      <li v-for="(item,index) in staffsList" :key="index">
        <div class="song-item">
         <span class="item-index">
           {{ index + 1 }}
         </span>
          <span class="item-name" @click="goAlbum(item,item.name)">{{ item.name }}</span>
          <span class="item-title" @click="goAlbum(item,item.name)">{{ item.introduction }}</span>
          <span>
          <el-button size="mini" type="success" @click="previewXml(item.file)">乐谱显示</el-button>
        </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>

import {mixin} from '@/mixins';
import showXml from "@/util/showxml";

export default {
  name: "album-content",
  mixins: [mixin],
  props: {
    staffsList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    previewXml(fileUrl) {
      // 这里传入不同的url，展示不同滴文件
      showXml(fileUrl)
    },
    //进入乐谱页面
    goAlbum(item, type) {
      this.$store.commit('setTempList', item);
      if (type) {//乐谱
        this.$router.push({path: `/staff-alum/${item.id}`})
      } else {//乐谱集
        this.$router.push({path: `/staff-list-alum/${item.id}`})
      }
    }
  },
  mounted() {
  }


}
</script>

<style lang="scss" scoped>
@import "../assets/css/album-content.scss";
</style>
